<template>
  <div>
    <el-form :model="formItem" label-width="120px" size="mini" class="form-view">
      <el-divider content-position="left">基本信息</el-divider>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="名称" prop="name">
            {{ formItem.name }}
          </el-form-item>
        </el-col>
        <el-col v-if="!isConsumption" :span="12">
          <el-form-item label="资产编码" prop="code">
            {{ formItem.code }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资产分类" prop="smallTypeCode">
            {{ formItem.smallTypeName }}
          </el-form-item>
        </el-col>
        <el-col v-if="!isConsumption" :span="12">
          <el-form-item :label="isSl ? '资产卡片' : '原始编码'" prop="originalCode">
            {{ formItem.originalCode }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="购置日期" prop="purchaseDate">
            {{ formatDate(formItem.purchaseDate, 'YYYY-MM-DD') }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="品牌" prop="brand">
            {{ formItem.brand }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="规格型号" prop="specifications">
            {{ formItem.specifications }}
          </el-form-item>
        </el-col>
        <el-col v-if="!isConsumption" :span="12">
          <el-form-item label="序列号" prop="serialnumber">
            {{ formItem.serialnumber }}
          </el-form-item>
        </el-col>
        <el-col v-if="!isConsumption" :span="12">
          <el-form-item label="合同" prop="contractName">
            {{ formItem.contractName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="供应商" prop="supplierName">
            {{ formItem.supplierName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="金额" prop="money">
            {{ formItem.money }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计量单位" prop="measureUnit">
            {{ formItem.measureUnit }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider v-if="!isConsumption" content-position="left">维保信息</el-divider>
      <el-row v-if="!isConsumption" :gutter="40">
        <el-col :span="12">
          <el-form-item label="维保开始">
            {{ formatDate(formItem.maintenanceStartTime, 'YYYY-MM-DD') }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="维保结束">
            {{ formatDate(formItem.maintenanceEndTime, 'YYYY-MM-DD') }}
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">其它信息</el-divider>
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            {{ ASSET_STATUS_MAP[formItem.status] }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="位置" prop="location">
            {{ formItem.locationName }}
          </el-form-item>
        </el-col>
        <el-col v-if="isKj" :span="12">
          <el-form-item label="机房" prop="computerRoom">
            {{ formItem.computerRoom }}
          </el-form-item>
        </el-col>
        <el-col v-if="isKj" :span="12">
          <el-form-item label="机柜" prop="cabinet">
            {{ formItem.cabinet }}
          </el-form-item>
        </el-col>
        <el-col v-if="!isConsumption" :span="12">
          <el-form-item label="使用部门" prop="managementOrgCode">
            {{ formItem.managementOrgName }}
          </el-form-item>
        </el-col>
        <el-col v-if="!isConsumption" :span="12">
          <el-form-item label="使用人" prop="managementUserCode">
            {{ formItem.managementUserName }}
          </el-form-item>
        </el-col>
        <el-col v-if="isConsumption" :span="12">
          <el-form-item label="数量" prop="amount">
            {{ formItem.amount }}
          </el-form-item>
        </el-col>
        <el-col v-if="!isConsumption" :span="12">
          <el-form-item label="使用期限" prop="usePeriod">
            {{ formItem.usePeriod }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用途" prop="location">
            {{ formItem.purpose }}
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="note">
            {{ formItem.note }}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { detail, detailByCode } from '@neu/dcam-ui/api/fixedAsset'
import belongs from '@neu/dcam-ui/mixins/belongs'
import { ASSET_STATUS_MAP } from '@neu/dcam-ui/utils/constants'
import { formatDate } from '@neu/biz-core/utils/utils'

// 定义一个表单原始项
const formItem = {
  /** 资产名称 */
  name: '',
  /** 资产编号 */
  code: '',
  /** 原始资产编号 */
  originalCode: '',
  /** 购置日期 */
  purchaseDate: null,
  /** 供应商ID */
  supplierId: '',
  /** 供应商名称 */
  supplierName: '',
  /** 品牌 */
  brand: '',
  /** 规格型号 */
  specifications: '',
  /** 序列号 */
  serialnumber: '',
  /** 机房 */
  computerRoom: '',
  /** 位置编码 */
  location: null,
  /** 机柜 */
  cabinet: '',
  /** 维保开始时间 */
  maintenanceStartTime: null,
  /** 维保结束时间 */
  maintenanceEndTime: null,
  /** 位置 */
  locationName: '',
  /** 大类型名称 */
  bigTypeName: '',
  /** 大类型编码 */
  bigTypeCode: '',
  /** 中类型名称 */
  middleTypeName: '',
  /** 中类型编码 */
  middleTypeCode: '',
  /** 小类型名称 */
  smallTypeName: '',
  /** 小类型编码 */
  smallTypeCode: null,
  /** 合同号 */
  contractNo: '',
  /** 合同名称 */
  contractName: '',
  /** 计量单位 */
  measureUnit: '',
  /** 数量 */
  amount: 1,
  /** 金额 */
  money: 0.00,
  /** 使用期限 */
  usePeriod: '',
  /** 经办人 */
  agent: '',
  /** 备注 */
  note: '',
  /** 管理部门名称 */
  managementOrgName: '',
  /** 管理部门编码 */
  managementOrgCode: null,
  /** 管理人编码 */
  managementUserCode: '',
  /** 管理人名称 */
  managementUserName: '',
  /** 所属 */
  belongs: '',
  /** 类别 */
  categories: '',
  /** 资产卡片 */
  card: '',
  status: ''
}
export default {
  name: 'FixedAssetViewPage',
  components: {
  },
  mixins: [belongs],
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    },
    code: {
      required: false,
      type: String,
      default: 'NULL'
    },
    viewType: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      /** 是否初始化 */
      isUpdateInit: true,
      /** 使用人集合 */
      formItem: { ...formItem },
      ASSET_STATUS_MAP,
      formatDate
    }
  },
  computed: {
    isSl: function() {
      return this.belongs === 'sl' && this.categories !== '3'
    },
    isKj: function() {
      return this.belongs === 'kj' && this.categories !== '3'
    },
    isConsumption: function() {
      return this.categories === '3'
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        if (this.id) {
          this.fetch()
        }
      },
      immediate: true
    }
  },
  created() {
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1 && this.viewType === -1) {
        detail(this.id).then(response => {
          this.isUpdateInit = false
          this.formItem = { ... response.data }
        })
      } else if (this.code !== 'NULL' && this.viewType !== -1) {
        detailByCode(this.code).then(response => {
          this.isUpdateInit = false
          this.formItem = { ... response.data }
        })
      } else {
        this.formItem = { ...formItem }
      }
    }
  }
}
</script>

